<template>
  <div class="vaw-avatar-container">
    <a-dropdown trigger="hover" size="large" @select="handleSelect" position="br">
      <div class="action-wrapper">
        <span class="nick-name"> {{ userStore.realName || '用户' }} </span>
        <icon-down class="tip" />
      </div>
      <template #content>
        <a-doption v-for="item of options" :key="item.key" :value="item.key">
          <template #icon>
            <component :is="item.icon" />
          </template>
          {{ item.label }}
        </a-doption>
      </template>
    </a-dropdown>
  </div>

  <!-- 修改密码 -->
  <edit-pass-word-Modal ref="edit_pass_word" />
  <!-- 用户信息 -->
  <user-info ref="user_info" />
</template>

<script lang="ts">
  import { Modal } from '@arco-design/web-vue'
  import { defineComponent, ref } from 'vue'
  import {
    IconUser as UserOutlined,
    IconImport as LogoutOutlined,
    IconLock as EditPassWord,
    IconCaretDown as CaretDownOutlined,
  } from '@arco-design/web-vue/es/icon'
  import useUserStore from '@/store/modules/user'
// import { useRouter } from 'vue-router'
import EditPassWordModal from './editPassword.vue'
  import UserInfo from './userInfo.vue'

  export default defineComponent({
    name: 'VAWavatar',
    components: { UserOutlined, LogoutOutlined, CaretDownOutlined, EditPassWord, EditPassWordModal, UserInfo },
    setup() {
      const userStore = useUserStore()
      const options = [
        {
          label: '修改密码',
          key: 'edit-password',
          icon: 'EditPassWord',
        },
        {
          label: '用户信息',
          key: 'personal-center',
          icon: 'UserOutlined',
        },
        {
          label: '退出登录',
          key: 'logout',
          icon: 'LogoutOutlined',
        },
      ]
      // const router = useRouter()
      const user_info = ref(null)
      function personalCenter() {
        user_info.value.show()
      }
      function logout() {
        Modal.confirm({
          title: '提示',
          content: '是否要退出当前账号？',
          okText: '退出',
          cancelText: '再想想',
          onOk: () => {
            userStore.logout(true).then(() => {
              window.location.reload()
            })
          },
        })
      }
      const edit_pass_word = ref(null)
      function editPassWord() {
        console.log(edit_pass_word.value)
        edit_pass_word.value.show()
      }
      function handleSelect(key: string) {
        switch (key) {
          case 'personal-center':
            personalCenter()
            break
          case 'logout':
            logout()
            break
          case 'edit-password':
            editPassWord()
            break
        }
      }
      return {
        userStore,
        options,
        handleSelect,
        editPassWord,
        user_info,
        edit_pass_word,
      }
    },
  })
</script>

<style lang="less" scoped>
  .vaw-avatar-container {
    margin-left: 6px;
    .action-wrapper {
      display: flex;
      align-items: center;
      margin-right: 6px;
      .avatar {
        display: flex;
        align-items: center;
        & > img {
          border: 1px solid #f6f6f6;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 50%;
        }
      }
      .nick-name {
        font-size: 14px;
        font-weight: 500;
        color: #1d2129;
        line-height: 22px;
        margin-right: 6px;
        .tip {
          transform: rotate(0);
          transition: transform @transitionTime;
        }
      }
    }
  }
  .vaw-avatar-container:hover {
    cursor: pointer;
    color: var(--primary-color);
    .tip {
      transform: rotate(180deg);
      transition: transform @transitionTime;
    }
  }
</style>
